<template>
  <div class="pad test-report" id="testReport">
    <div class="head">
      <el-page-header  @back="goBack" :content="pathTitle">
      </el-page-header>
      <!-- <span>结果报表</span> -->
    </div>
    <el-button
      type="primary"
      @click="exportPDF"
      :loading="isDoing"
      :disabled="loading"
    >
      <i class="el-icon-download"></i>
      导出PDF
    </el-button>
    <!-- <el-button
      :disabled="true"
      type="primary"
      @click="printPDF"
    >
      <i class="el-icon-download"></i>
      打印PDF
    </el-button> -->
    <div v-loading="loading">
      <div class="report-wrap" ref="report">
        <div class="place-div"></div>
        <div style="flex: 1">
          <div class="c-title">{{cname || '--'}}</div>
          <div class="m-info">
            <div>
              <span>姓名: </span>
              <span>{{baseInfo.nickname || '--'}}</span>
            </div>
            <div>
              <span>年龄: </span>
              <span>{{baseInfo.age || '--'}}</span>
            </div>
            <div>
              <span>性别: </span>
              <span>{{baseInfo.gender === 1 ? '男' : '女'}}</span>
            </div>
            <div>
              <span>组织机构: </span>
              <span>{{baseInfo.enterpriseName || '--'}}</span>
            </div>
            <div>
              <span>班级/年级: </span>
              <span>{{baseInfo.sno || '--'}}</span>
            </div>
            <div>
              <span>测评时间: </span>
              <span>{{qtime}}</span>
            </div>
          </div>
          <div class="content-wrap">
            <div class="content-title">
              <span></span>
              <span>测试结果</span>
            </div>
            <table class="content-table">
              <tr class="t-head">
                <td></td>
                <td>原始分</td>
                <td>参考诊断</td>
                <td>严重程度</td>
              </tr>
              <tr
                v-for="(item, index) in resultList"
                :key="index"
                class="t-item"
              >
                <td>{{item.label}}</td>
                <td>{{item.score}}</td>
                <td>{{item.standard}}</td>
                <td>{{item.level}}</td>
              </tr>
            </table>

            <div class="content-title" style="margin-top: 30px;">
              <span></span>
              <span>重点提示</span>
            </div>
            <table class="content-table">
              <tr
                v-for="(item, index) in question"
                :key="index"
                class="t-item_question"
              >
                <td>{{index + 1}}、{{item.label}}</td>
                <td>{{item.answer}}</td>
              </tr>
            </table>

            <div class="content-title" style="margin-top: 30px;">
              <span></span>
              <span>指导意见</span>
            </div>
            <div style="margin-top: 20px;">
              <div
                class="feedback-item"
                v-for="(item, index) in feedbacks"
                :key="index"
              >
                <span>{{item.label}}：</span>
                <span>{{item.desc}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="place-div"></div>
      </div>
    </div>
  </div>
</template>
<script>
import html2canvas from 'html2canvas';
import { jsPDF } from 'jspdf';
import {
  getMentalRecordInfo
} from '../api/version2'
export default {
  name: 'TestReport',
  props: ['mId', 'orderNum', 'cname','qtime'],
  data () {
    return {
      title: '',
      alSelectSchool: '',
      currentPdf: null,
      isDoing: false,
      loading: false,
      quizTime: '',
      baseInfo: {
        nickname: '',
        age: '',
        gender: '',
        time: '',
        sno: '',
        enterpriseName: ''
      },
      resultList: [],
      question: [],
      feedbacks: []
    }
  },
  methods: {
     goBack () {
      history.back()
    },
    exportPDF () { // 导出pdf
      const that = this;
      this.isDoing = true;
      html2canvas(this.$refs.report, {})
      .then(canvas => {

        try {
          var contentWidth = canvas.width;
          var contentHeight = canvas.height;

          //一页pdf显示html页面生成的canvas高度; 
          var pageHeight = contentWidth / 592.28 * 841.89;
          //未生成pdf的html页面高度
          var leftHeight = contentHeight;
          //页面偏移
          var position = 0;
          //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
          var imgWidth = 595.28;
          var imgHeight = 592.28/contentWidth * contentHeight;

          var pageData = canvas.toDataURL('image/jpeg', 1.0);

          var pdf = new jsPDF('', 'pt', 'a4');

          //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
          //当内容未超过pdf一页显示的范围，无需分页
          if (leftHeight < pageHeight) {
          pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight );
          } else {
              while(leftHeight > 0) {
                  pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                  leftHeight -= pageHeight;
                  position -= 841.89;
                  //避免添加空白页
                  if(leftHeight > 0) {
                    pdf.addPage();
                  }
              }
          }
          
          this.isDoing = false;
          const pdfName = `${this.baseInfo.enterpriseName}-${this.baseInfo.nickname}-${this.cname}测评结果报表.pdf`;
          pdf.save(pdfName)
        } catch (e) {
          console.log(e)
        }
      })
      .catch(e => {
        this.$message.error(e);
        this.isDoing = false
      })
    },
    printPDF () { // 打印pdf
      const el = document.getElementById('testReport');
      if (document.getElementById('reportframe')) {
        el.removeChild(document.getElementById('reportframe'))
      };
      const reportframe = document.createElement('iframe');
      reportframe.style.display = 'none';
      reportframe.id = 'reportframe';
      reportframe.src = '/home';
      el.appendChild(reportframe);
      reportframe.contentWindow.print()
    },
    fetchMentalRecordInfo () {
      this.loading = true;
      getMentalRecordInfo(this.mId, this.orderNum)
      .then(res => {
        // console.log(res);
        this.loading = false;
        let obj = res.data.data;
        this.baseInfo.nickname = obj.nickname;
        this.baseInfo.age = obj.age;
        this.baseInfo.gender = obj.gender;
        this.baseInfo.sno = obj.sno;
        this.baseInfo.enterpriseName = obj.enterpriseName;
        this.resultList = obj.testResult.map(item => {
          return {
            label: item.psychologicalrulesTitle,
            score: item.totalScore,
            standard: item.type === 1 ? '正常' : '异常',
            level: item.degree || '无'
          }
        });
        this.question = obj.reslutValues.map(item => {
          return {
            label: item.title,
            answer: item.value + '、' + item[item.value]
          }
        });
        this.feedbacks = obj.result.map(item => {
          return {
            label: item.psychologicalrulesTitle,
            desc: item.result
          }
        })
      })
      .catch(e => {
        this.loading = false
      })
    }
  },
  created () {
    let path = this.$route.meta.path;
    this.pathTitle = path[path.length - 1];
    // console.log(this.mId, this.orderNum, this.cname, this.qtime);
    this.quizTime = this.qtime;
    this.fetchMentalRecordInfo()
  },

}
</script>
<style lang="scss">
  .report-wrap {
    display: flex;
    margin: 0 auto;
    // padding: 0 48px;
    max-width: 1240px;
    box-sizing: border-box;
    background-color: #fff;
    .place-div {
      width: 48px;
      flex-shrink: 0;
    }
    .c-title {
      font-size: 50px;
      color: #000000;
      text-align: center;
    }
    .m-info {
      display: flex;
      margin-top: 60px;
      flex-wrap: wrap;
      & > div {
        margin-right: 40px;
        flex-shrink: 0;
        &:last-child {
          margin-right: 0;
        }
        span {
          font-size: 20px;
        }
        span:nth-of-type(1) {
          color: #000;
        }
        span:nth-of-type(2) {
          color: #888888;
        }
      }
    }
    .content-wrap {
      margin-top: 30px;
      padding: 35px;
      // box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid #ccc;
      border-radius: 4px;
      .content-title {
        span {
          display: inline-block;
        }
        span:nth-of-type(1) {
          width: 3px;
          height: 17px;
          background-color: #BE4949;
        }
        span:nth-of-type(2) {
          margin-left: 10px;
          font-size: 20px;
          color: #000000;
        }
      }
      .content-table {
        margin-top: 20px;
        width: 100%;
        box-sizing: border-box;
        border: 1px solid #E6E6E7;
        tr {
          display: flex;
          width: 100%;
          border-bottom: 1px solid #E6E6E7;
          &:last-child {
            border-bottom: none;
          }
          &.t-head {
            td {
              color: #000000;
              flex-shrink: 0;
              flex: 1;
            }
          }
          &.t-item {
            td {
              color: #888888;
              flex-shrink: 0;
              flex: 1;
            }
          }
          td {
            font-size: 20px;
            height: 62px;
            line-height: 62px;
            border-left: 1px solid #E6E6E7;
            &:first-child {
              padding-left: 40px;
              border-left: none;
            }
            &:not(:first-child) {
              text-align: center;
            }
          }
          &.t-item_question {
            padding: 0 40px!important;
            justify-content: space-between!important;
            td {
              padding: 0!important;
              border: none!important;
              font-size: 20px;
              &:nth-of-type(1) {
                color: #000000;
              }
              &:nth-of-type(2) {
                color: #888888;
              }
            }
          }
        }
      }
      .feedback-item {
        margin-top: 10px;
        font-size: 20px;
        line-height: 28px;
        &:first-child {
          margin-top: 0;
        }
        span:nth-of-type(1) {
          color: #1D1D1D;
        }
        span:nth-of-type(2) {
          color: #888888;
        }
      }
    }
  }
  .head  {
    // border-bottom: 1px solid #e4e4e4;
    border-bottom: 1px solid #CCCCCC;
    margin-bottom: 20px;
    padding-bottom: 10px;
  }
</style>
